use dioxus::prelude::*;
use tokio::time::{sleep, Duration};

#[derive(Clone, PartialEq)]
pub enum ToastType {
    Success,
    Error,
    Warning,
    Info,
}
#[derive(Props, Clone, PartialEq)]
pub struct ToatsProps {
    id: u8,
    msg: String,
    #[props(default = ToastType::Info)]
    status: ToastType,
}

#[component]
pub fn Toats(props: ToatsProps) -> Element {
    let mut is_visible = use_signal(|| true);
    let mut is_hidden = use_signal(|| true);

    let mut anim = use_signal(|| "translate-x-0 opacity-100");

    use_future(move || async move {
        sleep(Duration::from_micros(50)).await;
        is_visible.set(false);
        sleep(Duration::from_secs(3)).await;

        anim.set("translate-x-full opacity-0");
        is_hidden.set(true);
    });

    rsx! {
        if *is_hidden.read() {
    div {

            aria_label: "Notifications",
            aria_live: "polite",
            class: "fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none",
            div {
                aria_live: "polite",
                class: format!(
                           "w-80 max-w-sm pointer-events-auto transform transition-all duration-300 ease-out {}",
                           anim
                       ),
                role: "status",
                div { class: format!("relative rounded-lg border shadow-lg p-4  {}",match props.status.clone() {
                              ToastType::Success => "border-green-200 bg-green-50 text-green-800",
                              ToastType::Error   => "border-red-200 bg-red-50 text-red-800",
                              ToastType::Warning => "border-yellow-200 bg-yellow-50 text-yellow-800",
                              ToastType::Info    => "border-blue-200 bg-blue-50 text-blue-800",
                            }),
                    div { class: "flex items-start gap-3",
                        div { class: format!("mt-0.5 {}",match props.status {
                                      ToastType::Success => "text-green-800",
                                      ToastType::Error   => "text-red-800",
                                      ToastType::Warning => "text-yellow-800",
                                      ToastType::Info    => "text-blue-800",
                                    }),
                            svg {
                                class: "lucide lucide-circle-alert h-5 w-5 flex-shrink-0",
                                fill: "none",
                                height: "24",
                                stroke: "currentColor",
                                stroke_linecap: "round",
                                stroke_linejoin: "round",
                                stroke_width: "2",
                                view_box: "0 0 24 24",
                                width: "24",
                                xmlns: "http://www.w3.org/2000/svg",
                                circle { cx: "12", cy: "12", r: "10" }
                                line {
                                    x1: "12",
                                    x2: "12",
                                    y1: "8",
                                    y2: "12",
                                }
                                line {
                                    x1: "12",
                                    x2: "12.01",
                                    y1: "16",
                                    y2: "16",
                                }
                            }
                        }
                        div { class: "flex-1 min-w-0",
                            div { class: "text-sm line-clamp-2 leading-relaxed",
                                {props.msg}
                            }
                        }
                        button {
                            onclick:move |_| async move{
                                is_hidden.toggle();
                                sleep(Duration::from_secs(2)).await;
                                is_hidden.toggle();
                            } ,
                            aria_label: "Close notification",
                            class: format!("flex-shrink-0 rounded-md p-1.5 hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-current transition-colors duration-150 {}",match props.status {
                                          ToastType::Success => "text-green-600",
                                          ToastType::Error   => "text-red-600",
                                          ToastType::Warning => "text-yellow-600",
                                          ToastType::Info    => "text-blue-600",
                                        }),
                            svg {
                                class: "lucide lucide-x h-4 w-4",
                                fill: "none",
                                height: "24",
                                stroke: "currentColor",
                                stroke_linecap: "round",
                                stroke_linejoin: "round",
                                stroke_width: "2",
                                view_box: "0 0 24 24",
                                width: "24",
                                xmlns: "http://www.w3.org/2000/svg",
                                path { d: "M18 6 6 18" }
                                path { d: "m6 6 12 12" }
                            }
                        }
                    }
                    div { class: "absolute bottom-0 left-0 right-0 h-1 bg-black/10 rounded-b-lg overflow-hidden",
                        div {
                            class: format!("h-full transition-all ease-linear bg-current opacity-30 {}",match props.status {
                                          ToastType::Success => "text-green-800",
                                          ToastType::Error   => "text-red-800",
                                          ToastType::Warning => "text-yellow-800",
                                          ToastType::Info    => "text-blue-800",
                                        }),
                            style: "animation: 3000ms linear 0s 1 normal none running toast-progress;",
                        }
                    }
                }
            }
        }
    }
    }
}
